<template>
  <div>
    <div>我是vuex使用模板页面</div>
    <button @click="getAge">获取值</button>
    <div>
      <button @click="setAge">设置值</button>
      <input v-model="current" type="number" />
    </div>
    <button @click="setAgeActions">设置值(异步)</button>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useStore } from 'vuex'
const store = useStore()
const current = ref<number>(16);

const age = computed(() => store.state.moduleA.account.age) // 仓库
const age1 = computed(() => store.getters['moduleA/getAge']) // 过滤

// 获取值
const getAge = () => {
  console.log('age:', age.value);
  console.log('age1(过滤):', age1.value);
}

// 设置值
const setAge = () => {
  store.commit('moduleA/setAge', current.value)
}

// 设置值(异步)
const setAgeActions = () => {
  store.dispatch('moduleA/setAgeActions', 33)
}
</script>
<style lang="scss" scoped>
</style>
